<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #4895ef;
            --secondary: #3f37c9;
            --success: #4cc9f0;
            --danger: #f72585;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --gray-light: #e9ecef;
            --border-radius: 8px;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: var(--dark);
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        header {
            background: white;
            color: #4f46e5;
            padding: 30px 20px;
            text-align: center;
        }

        h1 {
            font-size: 2.2rem;
            margin-bottom: 5px;
        }

        .subtitle {
            font-size: 1rem;
            opacity: 0.9;
            color:#7e848f;
        }

        .input-section {
            padding: 20px;
            border-bottom: 1px solid var(--gray-light);
        }

        .input-container {
            display: flex;
            gap: 10px;
            color:#7e848f;

        }

        #todo-input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid var(--gray-light);
            border-radius: var(--border-radius);
            font-size: 1rem;
            transition: var(--transition);
        }

        #todo-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
        }

        #add-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            padding: 12px 20px;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
        }

        #add-btn:hover {
            background-color: var(--secondary);
            transform: translateY(-2px);
        }

        .filters {
            display: flex;
            padding: 10px 20px;
            border-bottom: 1px solid var(--gray-light);
            background-color: var(--light);
        }

        .filter-btn {
            background: none;
            border: none;
            padding: 8px 16px;
            margin-right: 10px;
            border-radius: 20px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
        }

        .filter-btn.active {
            background-color: var(--primary);
            color: white;
        }

        .filter-btn:hover:not(.active) {
            background-color: var(--gray-light);
        }

        .todo-list {
            list-style: none;
            max-height: 400px;
            overflow-y: auto;
        }

        .todo-item {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid var(--gray-light);
            animation: fadeIn 0.3s ease;
            transition: var(--transition);
        }

        .todo-item:hover {
            background-color: rgba(67, 97, 238, 0.05);
        }

        .todo-item.completed {
            opacity: 0.7;
        }

        .todo-checkbox {
            width: 20px;
            height: 20px;
            margin-right: 15px;
            cursor: pointer;
            accent-color: var(--primary);
        }

        .todo-text {
            flex: 1;
            font-size: 1rem;
        }

        .todo-item.completed .todo-text {
            text-decoration: line-through;
            color: var(--gray);
        }

        .delete-btn {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
            transition: var(--transition);
            opacity: 0;
        }

        .todo-item:hover .delete-btn {
            opacity: 1;
        }

        .delete-btn:hover {
            color: var(--danger);
            background-color: rgba(247, 37, 133, 0.1);
        }

        .stats {
            padding: 15px 20px;
            text-align: center;
            color: var(--gray);
            font-size: 0.9rem;
            border-top: 1px solid var(--gray-light);
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--gray);
        }

        .empty-state.hidden {
            display: none;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(-100%);
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .input-container {
                flex-direction: column;
            }
            
            #add-btn {
                width: 100%;
            }
            
            .filters {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>待办事项</h1>
            <p class="subtitle">简单高效地管理你的任务</p>
        </header>
        
        <div class="input-section">
            <div class="input-container">
                <input type="text" id="todo-input" placeholder="添加新的待办事项..." autocomplete="off">
                <button id="add-btn">+ 添加</button>
            </div>
        </div>
        
        <div class="filters">
            <button class="filter-btn active" data-filter="all">全部</button>
            <button class="filter-btn" data-filter="active">未完成</button>
            <button class="filter-btn" data-filter="completed">已完成</button>
        </div>
        
        <div class="empty-state" id="empty-state">
            <p>暂无待办事项，添加一个开始吧！</p>
        </div>
        
        <ul class="todo-list" id="todo-list"></ul>
        
        <div class="stats" id="stats">
            <span id="active-count">0</span>个未完成，<span id="total-count">0</span>个总计
        </div>
    </div>

    <script>
        // 待办事项类
        class TodoItem {
            constructor(id, text, completed = false) {
                this.id = id;
                this.text = text;
                this.completed = completed;
                this.createdAt = new Date();
            }
            
            toggle() {
                this.completed = !this.completed;
            }
        }

        // 待办事项列表管理类
        class TodoList {
            constructor() {
                this.todos = [];
                this.filter = 'all';
                this.loadFromLocalStorage();
                this.render();
                this.setupEventListeners();
            }
            
            // 从localStorage加载数据
            loadFromLocalStorage() {
                const stored = localStorage.getItem('todos');
                if (stored) {
                    const parsed = JSON.parse(stored);
                    this.todos = parsed.map(item => new TodoItem(
                        item.id, 
                        item.text, 
                        item.completed
                    ));
                }
            }
            
            // 保存到localStorage
            saveToLocalStorage() {
                localStorage.setItem('todos', JSON.stringify(this.todos));
            }
            
            // 添加新待办事项
            addTodo(text) {
                if (text.trim() === '') return;
                
                const id = Date.now().toString();
                const newTodo = new TodoItem(id, text.trim());
                this.todos.push(newTodo);
                this.saveToLocalStorage();
                this.render();
                
                // 添加动画效果
                const newItem = document.querySelector(`[data-id="${id}"]`);
                if (newItem) {
                    newItem.style.animation = 'fadeIn 0.3s ease';
                }
            }
            
            // 删除待办事项
            deleteTodo(id) {
                const todoIndex = this.todos.findIndex(todo => todo.id === id);
                if (todoIndex !== -1) {
                    // 添加删除动画
                    const todoElement = document.querySelector(`[data-id="${id}"]`);
                    if (todoElement) {
                        todoElement.style.animation = 'slideOut 0.3s ease forwards';
                        setTimeout(() => {
                            this.todos.splice(todoIndex, 1);
                            this.saveToLocalStorage();
                            this.render();
                        }, 300);
                    }
                }
            }
            
            // 切换待办事项状态
            toggleTodo(id) {
                const todo = this.todos.find(todo => todo.id === id);
                if (todo) {
                    todo.toggle();
                    this.saveToLocalStorage();
                    this.render();
                }
            }
            
            // 设置过滤条件
            setFilter(filter) {
                this.filter = filter;
                this.render();
            }
            
            // 获取过滤后的待办事项
            getFilteredTodos() {
                switch(this.filter) {
                    case 'active':
                        return this.todos.filter(todo => !todo.completed);
                    case 'completed':
                        return this.todos.filter(todo => todo.completed);
                    default:
                        return this.todos;
                }
            }
            
            // 更新统计信息
            updateStats() {
                const activeCount = this.todos.filter(todo => !todo.completed).length;
                const totalCount = this.todos.length;
                
                document.getElementById('active-count').textContent = activeCount;
                document.getElementById('total-count').textContent = totalCount;
                
                // 显示/隐藏空状态
                const emptyState = document.getElementById('empty-state');
                if (totalCount === 0) {
                    emptyState.classList.remove('hidden');
                } else {
                    emptyState.classList.add('hidden');
                }
            }
            
            // 渲染待办事项列表
            render() {
                const todoList = document.getElementById('todo-list');
                const filteredTodos = this.getFilteredTodos();
                
                todoList.innerHTML = '';
                
                filteredTodos.forEach(todo => {
                    const li = document.createElement('li');
                    li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
                    li.setAttribute('data-id', todo.id);
                    
                    li.innerHTML = `
                        <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''}>
                        <span class="todo-text">${todo.text}</span>
                        <button class="delete-btn">×</button>
                    `;
                    
                    todoList.appendChild(li);
                });
                
                this.updateStats();
            }
            
            // 设置事件监听器
            setupEventListeners() {
                const todoInput = document.getElementById('todo-input');
                const addBtn = document.getElementById('add-btn');
                const filterBtns = document.querySelectorAll('.filter-btn');
                const todoList = document.getElementById('todo-list');
                
                // 添加待办事项
                const addTodoHandler = () => {
                    this.addTodo(todoInput.value);
                    todoInput.value = '';
                    todoInput.focus();
                };
                
                addBtn.addEventListener('click', addTodoHandler);
                
                todoInput.addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') {
                        addTodoHandler();
                    }
                });
                
                // 过滤按钮
                filterBtns.forEach(btn => {
                    btn.addEventListener('click', () => {
                        filterBtns.forEach(b => b.classList.remove('active'));
                        btn.classList.add('active');
                        this.setFilter(btn.dataset.filter);
                    });
                });
                
                // 使用事件委托处理列表点击
                todoList.addEventListener('click', (e) => {
                    const todoItem = e.target.closest('.todo-item');
                    if (!todoItem) return;
                    
                    const id = todoItem.dataset.id;
                    
                    // 切换完成状态
                    if (e.target.classList.contains('todo-checkbox')) {
                        this.toggleTodo(id);
                    }
                    
                    // 删除待办事项
                    if (e.target.classList.contains('delete-btn')) {
                        this.deleteTodo(id);
                    }
                });
            }
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            new TodoList();
        });
    </script>
</body>
</html>